<template>
  <div>
    <el-drawer
      :title="place.placeName"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="scroll_wrapper">
        <div v-if="!(videoFlag || imageFlag || sensorDataFlag)" class="tip">此地块下暂无任何数据</div>
        <div v-if="videoFlag" class="video_wrapper" @click="openVideoDialog">
          <i class="el-icon-video-camera" />
          <span>地块视频</span>
        </div>
        <div v-if="imageFlag" class="image_wrapper">
          <el-carousel style="border-radius:8px;overflow:hidden;" :interval="5000" arrow="always" height="250px">
            <el-carousel-item v-for="item in images" :key="item.imgId">
              <el-image :src="item.imgUrl" class="image" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- <el-row class="place_info">
      <el-col :span="8">地块名称</el-col>
      <el-col :span="16">{{ place.placeName }}</el-col>
    </el-row> -->
        <div v-if="sensorDataFlag" class="sensor_data">
          <div class="title">传感器数据</div>
          <div class="items">
            <div v-for="item of sensorData" :key="item.icon" class="item">
              <div class="icon">
                <svg-icon :icon-class="item.icon" />
                <span class="text">{{ item.title }}</span>
              </div>
              <div class="data">
                <div class="shuju">{{ item.data }}</div>
                <el-tag>{{ item.tip }}</el-tag>
              </div>
            </div>
          </div>
        </div>
        <el-button
          v-if="claimBtnFlag"
          class="btn"
          type="primary"
          @click.native="claimPlace"
        >
          认领地块
        </el-button>
        <div v-else class="drawer-tip">tip：{{ msg }}</div>
      </div>
    </el-drawer>
    <video-dialog
      title="地块视频"
      :video-dialog-visible="videoDialogVisible"
      :video-url="videoUrl"
      @close="closeVideoDialog"
    />
  </div>

</template>

<script>
import { queryPlaceImage } from '@/api/place'
import { querySensorData } from '@/api/sensorData'
import { addClaimMsg, placeIsClaim } from '@/api/claim'
import VideoDialog from './VideoDialog'
import store from '@/store'

export default {
  name: 'MyDrawer',
  components: {
    VideoDialog
  },
  props: {
    drawer: {
      type: Boolean,
      required: true
    },
    siteId: {
      type: Number,
      required: true
    },
    entId: {
      type: Number,
      required: true
    },
    place: {
      type: Object,
      required: true
    }
  },
  data() {
    const IMAGE_FILE_NAME = 'placeImage'
    return {
      msg: '',
      images: [],
      sensorData: {},
      videoDialogVisible: false,
      videoUrl: '',
      role: store.getters.role,
      account: store.getters.token,
      direction: 'rtl',
      claimBtnFlag: true,
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME
    }
  },
  computed: {
    placeId() {
      return this.place.placeId
    },
    imageFlag() {
      return this.images.length !== 0
    },
    videoFlag() {
      return this.place.vidoUrl !== ''
    },
    sensorDataFlag() {
      return this.sensorData.length !== 0
    }
  },
  watch: {
    drawer(newValue) {
      if (newValue === true) {
        this.queryPlaceImage()
        this.querySensorData()
        if (this.role === null) {
          this.claimBtnFlag = true
        } else {
          this.placeIsClaim()
        }
      }
    }
  },
  methods: {
    queryPlaceImage() {
      queryPlaceImage({ placeId: this.place.placeId })
        .then(response => {
          const placeImages = response.placeImages
          placeImages.map(item => {
            item.imgUrl = this.imgUrl + '/' + item.imgUrl
          })
          this.images = placeImages
        })
        .catch(error => {
          console.log(error)
        })
    },
    querySensorData() {
      querySensorData({ placeIds: this.place.placeId })
        .then(response => {
          this.handleData(response)
          this.sensorDataFlag = response.soil !== undefined
        })
        .catch(error => {
          console.log(error)
        })
    },
    handleData(sensorData) {
      const newValue = sensorData
      const dataArr = []
      for (const key in newValue) {
        switch (key) {
          case 'par': {
            dataArr.push({
              data: newValue[key].intensity,
              tip: newValue[key].alarmType,
              icon: 'radiation',
              title: '光照辐射'
            })
            break
          }
          case 'rainFall': {
            dataArr.push({
              data: newValue[key].rainFall,
              tip: newValue[key].alarmType,
              icon: 'rainfall',
              title: '降雨量'
            })
            break
          }
          case 'radiation': {
            dataArr.push({
              data: newValue[key].intensity,
              tip: newValue[key].alarmType,
              icon: 'sunpower',
              title: '光照强度'
            })
            break
          }
          case 'dew': {
            dataArr.push({
              data: newValue[key].temp + '℃',
              tip: newValue[key].alarmType,
              icon: 'dew',
              title: '露水温度'
            })
            break
          }
          case 'soil': {
            dataArr.push({
              data: newValue[key].temp + '℃',
              tip: newValue[key].alarmType,
              icon: 'soiltemp',
              title: '土壤温度'
            })
            dataArr.push({
              data: newValue[key].hum + '%',
              tip: newValue[key].alarmType,
              icon: 'soilhum',
              title: '土壤湿度'
            })
            break
          }
          case 'air': {
            dataArr.push({
              data: newValue[key].temp + '℃',
              tip: newValue[key].alarmType,
              icon: 'airtemp',
              title: '空气温度'
            })
            dataArr.push({
              data: newValue[key].hum + '%',
              tip: newValue[key].alarmType,
              icon: 'airhum',
              title: '空气湿度'
            })
            break
          }
          case 'wind': {
            dataArr.push({
              data: newValue[key].speed,
              tip: newValue[key].alarmType,
              icon: 'windspeed',
              title: '风速'
            })
            dataArr.push({
              data: newValue[key].direction,
              tip: newValue[key].alarmType,
              icon: 'winddirection',
              title: '风向'
            })
            break
          }
        }
      }
      this.sensorData = dataArr
    },
    handleClose() {
      this.$emit('close')
    },
    openVideoDialog() {
      this.videoDialogVisible = true
      this.videoUrl = this.place.vidoUrl
    },
    closeVideoDialog() {
      this.videoDialogVisible = false
    },
    claimPlace() {
      if (this.role === null) {
        this.$message({
          message: '请先登录！',
          type: 'warning'
        })
      } else {
        this.$confirm('是否认领地块?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addClaimMsg({
            account: this.account,
            placeId: this.placeId,
            siteId: this.siteId,
            entId: this.entId
          })
            .then(response => {
              if (response.flag === true) {
                this.placeIsClaim()
              }
            })
            .catch(error => {
              console.log(error)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    },
    placeIsClaim() {
      console.log(this.placeId)
      placeIsClaim({
        placeId: this.placeId,
        account: this.account
      })
        .then(response => {
          if (response.msg === 'error') {
            this.claimBtnFlag = true
          } else {
            this.claimBtnFlag = false
            this.msg = response.msg
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.scroll_wrapper {
  height:100vh;
  padding-bottom:120px;
  overflow-y: scroll;
  .tip {
    padding:10px;
    text-align: center;
    color:#999;
    font-size:13px;
  }
  .video_wrapper {
    padding:0 10px;
    margin-bottom:10px;
    color:#409EFF;
    font-size:13px;
    cursor:pointer;
    display:flex;
    align-items: center;
    i {
      font-size:20px;
      margin-right:5px;
    }
  }
  .image_wrapper {
    padding:10px;
    .image {
      width:100%;
      height:100%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
  }
  .place_info {
    margin: 20px 10px;
  }
  .sensor_data {
    .title {
      padding:10px;
      color:#409EFF;
      font-size:13px;
      font-weight:bolder;
    }
    .items {
      .item {
        display:flex;
        padding:5px 10px;
        .icon {
          display:flex;
          align-items: center;
          color: #409EFF;
          font-size:18px;
          flex:1;
          .text {
            display: inline-block;
            margin-left:10px;
            font-size:14px;
          }
        }
        .data {
          display:flex;
          align-items: center;
          flex:1;
          justify-content: flex-end;
          color:#409EFF;
          .shuju {
            margin-right:10px;
          }
        }
      }
      .item:nth-child(odd) {
        background-color:#e5e9f2;
      }
    }
  }
  .btn {
    width:90%;
    margin: 20px auto 0 auto;
    display: block;
  }
}

.drawer-tip {
  text-align: center;
  color:#409EFF;
  line-height: 50px;
  font-style:italic;
}

</style>
